<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<!-- react核心代码 -->
		<script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script>
		<!-- react和DOM交互的 -->
		<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script>
		<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
		<title>state</title>
	</head>
	<body>
		<div id="root"></div>
		<script type="text/babel">
			class Weather extends React.Component {
				constructor(){
					super()//超级继承
					this.state={
						isHot:false,
						wind:'windy'
					}
					this.changeWeather=this.changeWeather.bind(this)
					
				}
				render(h) {
					  const {isHot} =this.state
					// jsx模板语法
					return (
					 <h1 onClick={this.changeWeather}>the weather is {isHot?'sunny':'cloudy'}</h1>
					)
				}
				changeWeather(){
					  const isHot=this.state.isHot
					  this.setState({
						   isHot:!isHot
					  })
				}
			}
			
			ReactDOM.render(<Weather />, document.getElementById('root'));
		</script>
	</body>
</html>
